<template>
	<!-- 基础训练 -->
	<view class="">
		<Header title="基础训练" :isHome="true" :isWhite='true'></Header>
		<view class="">
			<view class="top">
				<view class="flex">
					<view class="discipline-detail" :class="{ 'discipline-detail-active': activeIndex === item.id }"
						v-for="(item,index) in discipline" :key="index" @click="changeTab(item.id)">
						{{item.title}}
					</view>
				</view>
				<view class="change">
					<image src="/static/book.png" mode="" class="book"></image>
					<view class="flex1 twobtn">
						<view class="flex1 changeGrade" @click="toggleImage">
							<view class="">
								{{grade.title||'请选择年级'}}
							</view>
							<image src="/static/up.png" mode="" class="icon" v-if="isUpImageShown"></image>
							<image src="/static/down.png" mode="" class="icon" v-else></image>
						</view>
						<view class="flex1 lead" @click="getRanking()">
							<image src="/static/board.png" mode="" class="board"></image>
							<view class="">
								排行榜
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="element.length>0">
					<u-tabs :list="element" @click="getNode()" keyName="title" lineWidth="0" :activeStyle="{
					            color: '#fff',
					            fontWeight: 'bold',
								background:'#222',
								width:'120rpx',
								height:'50rpx',
								fontSize:'26rpx',
								textAlign:'center',
								lineHeight:'50rpx'
					        }" :inactiveStyle="{
					            color: '#222',
								width:'120rpx',
								height:'50rpx',
								fontSize:'26rpx',
								textAlign:'center',
								lineHeight:'50rpx'
					        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 24px;font-size:26rpx;">
					</u-tabs>
				</view>

			</view>
			<view class="chapter" v-if="chapterList.length>0" v-for="(item,index) in chapterList" :key="index"
				@click="showSubject(item.id,index)">
				<view class="flex">
					<view class="">
						{{item.title}}
					</view>
					<view class="">
						<image src="/static/up.png" mode="" class="icon1" v-if="isUp[index]"></image>
						<image src="/static/down.png" mode="" class="icon1" v-else></image>
					</view>
					<image src="/static/three.png" mode="" class="three"></image>
				</view>
				<view class="allsubject" v-if="isUp[index]" @click.stop="">
					<view class="" v-for="(itm,idx) in typeList" :key="idx">
						<view class="flex subject">
							<view class="leftImg">
								<image :src="imgUrl+itm.cover_image" mode=""></image>
							</view>
							<view class="">
								<view class="title">
									{{itm.title}}
								</view>
								<view class="content">
									{{itm.desc}}
								</view>
								<view class="numAndBtn">
									<view class="flex1" style="margin: 15rpx 0;">
										<view class="num">
											题目数量：<span>{{itm.quantity}}</span>
										</view>
										<view class="startAnswer" @click="goPageDetail(itm.id)">
											开始答题
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<u-picker :show="show" :columns="columns" keyName="title" @close="show=false" @confirm='confirm'
			closeOnClickOverlay="true" confirmColor='#222'></u-picker>
	</view>
</template>

<script>
	import index from '../../uni_modules/uview-ui';
	import {
		get, img_url
	} from '../../utils/request';
	export default {
		data() {
			return {
				imgUrl: img_url,
				title: '',
				grade: '',
				show: false,
				columns: [
					['一年级', '二年级', '三年级']
				],
				discipline: [{
						name: '语文',
					},
					{
						name: '数学',
					},
					{
						name: '英语',
					}
				],
				activeIndex: 0,
				isUp: [],
				isUpImageShown: false,
				element: [],
				chapterList: [],
				typeList: [],
				sbjText: ''
			}
		},
		onLoad(opt) {
			if (opt) {
				this.sbjText = opt.text
			}
			this.getSubject()
		},
		methods: {
			getSubject() {
				get('/subject/get_subject?module_id=2').then(res => {
						this.discipline = res.data
						if (this.sbjText) {
							for (let i = 0; i < this.discipline.length; i++) {
								if (this.discipline[i].title.includes(this.sbjText)) {
									this.activeIndex = this.discipline[i].id;
									break;
								}
							}
						} else {
							this.activeIndex = this.discipline[0].id
						}
						this.getGrade()
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getGrade() {
				get('/grade/get_grade?subject_id=' + this.activeIndex).then(res => {
						this.columns = [res.data]
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getUnit() {
				get('/unit/get_unit?grade_id=' + this.grade.id).then(res => {
						this.element = res.data
						this.getNode(this.element[0])
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getNode(e) {
				console.log(e);
				get('/node/get_node?unit_id=' + e.id).then(res => {
						this.chapterList = res.data
						for (let i = 0; i < this.chapterList.length; i++) {
							if (i >= this.isUp.length) {
								this.isUp.push(false);
							} else {
								this.isUp[i] = false;
							}
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getRanking() {
				if (!this.grade.id) {
					uni.showToast({
						title: '请选择年级',
						icon: 'none'
					})
					return
				}
				const info = {
					module_id: 2,
					subject_id: this.activeIndex,
					grade_id: this.grade.id
				}
				uni.navigateTo({
					url: '/subpages/banner/leaderboard?info=' + JSON.stringify(info)
				})
			},
			changeTab(index) {
				this.grade = {}
				this.element = []
				this.chapterList = []
				this.activeIndex = index
				this.getGrade()
			},
			toggleImage() {
				this.isUpImageShown = !this.isUpImageShown; // 点击时切换状态
				this.show = true
			},
			showSubject(id, index) {
				get('/paper/get_papers?module_id=2&node_id=' + id).then(res => {
						this.typeList = res.data
						this.isUp[index] = !this.isUp[index]
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
				this.$forceUpdate();
			},
			confirm(e) {
				console.log(e);
				this.grade = e.value[0]
				this.show = false
				this.isUpImageShown = !this.isUpImageShown;
				this.getUnit()
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			goPageDetail(id) {
				// 数学单独是一个页面的情况
				// 根据数学题的类型的情况
				// if (this.activeIndex == 5) {
				// 	uni.navigateTo({
				// 		url: '/subpages/banner/basicexamination?type=math&id=' + id
				// 	})
				// } else {
				uni.navigateTo({
					url: '/subpages/banner/basicexamination?id=' + id + '&subject_id=' + this.activeIndex +
						'&grade_id=' + this.grade.id
				})
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0;
		position: sticky;

		.flex {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 440rpx;
			height: 64rpx;
			border: 3rpx solid #1A1A1A;
			border-radius: 12rpx;
			margin: 0 auto;
		}
	}

	.discipline-detail {
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;
		padding: 0 10rpx;
		min-width: 110rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
	}

	.discipline-detail-active {
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #fff;
		background: url(/static/active-bg.png) no-repeat center center / cover;
	}

	.change {
		width: 686rpx;
		height: 152rpx;
		background: #1A1A1A;
		border-radius: 24rpx;
		margin: 50rpx auto 20rpx;
		position: relative;
		display: flex;
		align-items: center;

		.book {
			width: 142rpx;
			height: 160rpx;
			border-radius: 15rpx;
			position: absolute;
			top: -37rpx;
			left: 30rpx;
		}

		.flex1 {
			display: flex;
			align-items: center;

			.icon {
				width: 17.04rpx;
				height: 12.48rpx;
				margin-left: 10rpx;
			}
		}

		.twobtn {
			margin-left: 206rpx;
		}

		.changeGrade {
			width: 220rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			background: #FFD275;
			border-radius: 32rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 56rpx;

		}

		.board {
			width: 35.38rpx;
			height: 32.01rpx;
		}

		.lead {
			width: 168rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 24rpx;
			color: #222222;
			display: flex;
			justify-content: center;
			align-items: center;

			.board {
				margin-right: 10rpx;
			}
		}
	}

	.chapter {
		width: 686rpx;
		background: #FFFFFF;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;

		.three {
			width: 66rpx;
			height: 34rpx;
			position: absolute;
			top: -12rpx;
			right: 54rpx;
		}

		.icon1 {
			width: 20.45rpx;
			height: 14.98rpx;
		}
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 142rpx;
			height: 142rpx;
		}

	}

	.flex1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 420rpx;
	}

	.allsubject {
		width: 630rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #F5F5F5;
		margin: 20rpx auto;
		position: relative;
		border-radius: 8rpx;
	}

	.subject {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ccc;

		.startAnswer {
			width: 120rpx;
			height: 48rpx;
			background: #FFD275;
			border-radius: 6rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 48rpx;
		}


		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 26rpx;
			color: #222222;
		}

		.content {
			width: 420rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin: 20rpx 0;
		}

		.num {
			padding: 0 10rpx;
			height: 32rpx;
			background: #EEEEEE;
			border: 1rpx solid #DDDDDD;
			border-radius: 4rpx;
			text-align: center;
			line-height: 32rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 23rpx;
			color: #555555;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 23rpx;
				color: #222222;
			}
		}

		.mark {
			margin-right: 20rpx;
		}



	}
</style>